<template>
    <van-field v-model="curValue" clearable right-icon="search" :placeholder="placeholder" @click-right-icon="openModal"/>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';

@Component({
    components: {
    }
})
export default class AppPicker extends Vue {

    /**
     * 输入值
     * @type any
     * @memberof AppPicker
     */
    @Prop() public value?:any;

    get curValue(){
        return this.value;
    }

    set curValue(val:any){
        if(!val){
            this.$emit('valuechange',null);
            this.$emit('valueItemchange',null);
        }else{
            this.$emit('valuechange',val[0].srfmajortext);
            this.$emit('valueItemchange',val[0].srfkey);
        }
    }

    /**
     * 输入值
     * @type boolean
     * @memberof AppPicker
     */
    @Prop() public disabled?:boolean;

    /**
     * 值项名称
     * @type string
     * @memberof AppPicker
     */
    @Prop() public valueItem?:string;

    /**
     * 值项值数据
     * @type any
     * @memberof AppPicker
     */
    @Prop() public valueItemData?:any;

    /**
     * 空白提示信息
     * @type string
     * @memberof AppPicker
     */
    @Prop() public placeholder?:string;

    /**
     * 视图名称
     * @type string
     * @memberof AppPicker
     */
    @Prop() public viewname?:string;

    /**
     * 打开模态
     *
     * @memberof AppPicker
     */
    public openModal(){
        let currentValue:any;
        if(this.value && this.valueItemData){
            currentValue =[{srfkey:this.valueItemData,srfmajortext:this.value}];
        }
        if(this.viewname){
            let modalSubject =this.$modal({componentName:this.viewname,selectedData:currentValue}).show();
            modalSubject.subscribe((res:any) =>{
                if(res){
                    this.curValue = res;
                }
            });
        }else{
            console.log('选择视图未配置');
        }
    }


 	}
</script>
<style lang="less">

</style>